<template>
  <div class="registration-list-container">
    <van-nav-bar
      title="我的挂号"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list-wrapper">
          <van-cell-group
            v-for="registration in registrationList"
            :key="registration.id"
            inset
            class="registration-item"
          >
            <van-cell :title="registration.departmentName" :label="formatDate(registration.appointmentDate)">
              <template #value>
                <van-tag :type="getStatusType(registration.status)">
                  {{ getStatusText(registration.status) }}
                </van-tag>
              </template>
            </van-cell>
            <van-cell title="就诊医生" :value="registration.doctorName" />
            <van-cell title="就诊时间" :value="formatTime(registration.appointmentTime)" />
            <van-cell title="挂号费用" :value="'￥' + registration.fee" />
            <van-cell title="挂号编号" :value="registration.registrationNo" />
            <van-cell v-if="registration.remark" title="备注" :value="registration.remark" />
            
            <!-- 操作按钮 -->
            <div class="action-buttons" v-if="registration.status === 0">
              <van-button 
                type="danger" 
                size="small" 
                @click="handleCancel(registration)"
              >取消预约</van-button>
            </div>
          </van-cell-group>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog, showToast } from 'vant'
import { getMyRegistrations, cancelRegistration } from '../api'

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const registrationList = ref([])

// 返回上一页
const onClickLeft = () => router.back()

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '已预约',
    1: '已就诊',
    2: '已取消',
    3: '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'primary',
    1: 'success',
    2: 'danger',
    3: 'success'
  }
  return typeMap[status] || 'default'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return date.split('T')[0]
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  return time.split('T')[1].substring(0, 5)
}

// 加载数据
const loadData = async () => {
  try {
    const res = await getMyRegistrations()
    if (res.code === 200) {
      registrationList.value = res.data
    } else {
      showToast(res.message || '获取挂号记录失败')
    }
  } catch (error) {
    console.error('获取挂号记录失败：', error)
    showToast('获取挂号记录失败')
  }
  loading.value = false
  finished.value = true
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loadData()
  refreshing.value = false
}

// 上拉加载
const onLoad = () => {
  loadData()
}

// 取消预约
const handleCancel = (registration) => {
  showDialog({
    title: '取消预约',
    message: '确定要取消这个预约吗？',
    showCancelButton: true
  }).then(async () => {
    try {
      const res = await cancelRegistration(registration.id)
      if (res.code === 200) {
        showToast('取消成功')
        // 刷新列表
        onRefresh()
      } else {
        showToast(res.message || '取消失败')
      }
    } catch (error) {
      console.error('取消预约失败：', error)
      showToast('取消预约失败')
    }
  })
}

// 初始化
loadData()
</script>

<style lang="scss" scoped>
.registration-list-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.list-wrapper {
  padding: 12px;
}

.registration-item {
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.action-buttons {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
